<script setup>
  import { onMounted, ref } from 'vue'
  import OrderItem from "@/views/order/components/OrderItem.vue";
  import OrderType from "@/views/order/components/OrderType.vue";
  import { getOrderListApi } from "@/api/index.js";
  const orderType = ref(1000)
  const orderList = ref([])
  const switchOrderType = (id) => {
    orderType.value = id;
    getOrderList()
  }
  const getOrderList = () => {
    getOrderListApi({status: orderType.value===1000?'':orderType.value}).then(res=>{
      orderList.value = res.data
    })
  }
  onMounted(() => {
    getOrderList()
  })
</script>

<template>
  <div class="order-page">
    <OrderType @switchOrderType="switchOrderType"/>
    <div class="order-list">
      <OrderItem
        :order="item"
        v-for="item in orderList"
        :key="item.order_sn"
        @actionSuccess="getOrderList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-page {
    padding: 54px 0;
    .order-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }
</style>